Results matching “semantic markup” from Ye Olde Rad Blog III

Happy Halloween. I modified the method of placing the graphics in the header found at the top of the home page .. up where it says » RADIFIED | Nuclear Grade Technolust. There I implemented a technique known as » CSS Image Replacement, of which there exist many variations, each with its own set of pro's & con's.

The dividing-line among web designers seems to be whether or not to use a non-semantic span tag with CSS positioning, which involves a more complicated technique .. but leaves visible TEXT in place for visitors who surf the Web with STYLES turned off (primarily those using mobile devices).

I used a simpler IR technique, by changing the images you see displayed there .. from foreground images to background images.

This allowed me to replace the foreground images (contained in those heading elements) with TEXT .. which I then indented (way to your left), so it can't be seen. By moving the TEXT out of the way, this technique reveals the graphics (.. which look prettier than standard heading-text).

The advantage however, is » devices that don't render styles (such as screen readers and mobile devices) will now see a TEXT heading and tag-line displayed there, where before there existed only images. Search engines also gives more weight to TEXT than images.

Most Rad visitors will never notice the difference .. seeing most who frequent the site (fellow technolusters) browse with both images and CSS turned ON. But I'm gradually filling my webmaster toolkit with increasingly sophisticated techniques. (Learning by doing.)

After all the pages are styled however, and the markup is coded semantically, there's still no substitute for insightful content .. that is well written (.. and hopefully seasoned with a dash of personality).

This has always been the most difficult challenge .. because a stylish suit does not a charming pig make. And the ugliest person can say the profoundest things, and possess scintillating ideas. So it would seem that content trumps style .. no matter the venue (.. except maybe for those who focus on style).

Changed the underlying markup that controls the links in the blue-green sidebars on the home-page. They were previously coded as » paragraphs. I changed them to » list-items .. cuz that's what they are » a list of items (links) grouped according to category. Certainly not paragraphs .. not even sentences.

If I did this correctly, you shouldn't notice any difference. Cuz I applied the same styling to the list items .. tho this was trickier than it might sound. I nearly freaked when a single misplaced comma trashed my whole layout. Yikes!

This change represents a semantic improvement. Semantics (i.e. » 'meaning') is one of the buzz-words kicked around when thinkers discuss the Web's future.

Most surprising was that it took me so long to realize I had coded the home-page with semantically incorrect markup. It suddenly hit me (last night), when out of the blue (actually » blue-green), I thought » "Those links aren't paragraphs; they're a LIST."

If you view this home page in Firefox (or a browser other than IE or Opera), you'll notice I added some rounded corners.

Been reluctant to spend much time focusing on site styling, preferring rather to concentrate on generating » content.

In the world of cars, for example, I've always preferred the spartan cockpit of a Porsche to the bells & whistles you find sitting in a corvette. Tho admittedly, that's just my druthers.

My point » function should never take a back seat to form.

I've considered adding rounded corners many times before. Countless techniques exist. But they always seemed a kludge. (Andy agrees.) So I never felt it worth adding the extra markup necessary.

Techniques that use graphics to achieve their effect involve inserting additional HTML elements that are otherwise unnecessary, because current CSS standards (v2.1) allow only 1 background image per element (while each box has 4 corners). Future versions of CSS (v3.0) will support 8 images per element (for this very reason).

This approach has 2 main problems. First, adding (otherwise) unnecessary markup goes against all that is holy to the Web Standards movement, which touts the tenent of 'Semantic Markup' as one of its pillars.